import React from "react";
import {
  Form,
  Input,
  InputNumber,
  Select,
  Cascader,
  DatePicker,
  Button,
  Switch,
  TimePicker,
  FormInstance
} from "antd";
import FormUpload from "./FormUpload.tsx";
import FormRichEditor from "./FormRichEditor.tsx";
import FormMarkEditor from "./FormMarkEditor.tsx";
import FormJsonEditor from "./FormJsonEditor.tsx";
import type { FormItemConfigs } from "../../global.ts";

interface FormItemProps {
  item: FormItemConfigs;
  index: number;
  style?: React.CSSProperties;
}

const FormItem = ({ item, index, style }: FormItemProps) => {
  const renderCustomNode = (customNode: FormItemConfigs['customNode']) => {
    if (typeof customNode === 'function') {
      return (
        <Form.Item
          noStyle
          shouldUpdate
        >
          {(form: any) => {
            const value = form.getFieldValue(item.name);
            return customNode({
              value,
              onChange: (newValue: any) => form.setFieldValue(item.name, newValue),
              form
            });
          }}
        </Form.Item>
      );
    }
    return customNode;
  };

  switch (item.type) {
    case "hidden":
      return <Form.Item key={index} name={item.name} noStyle />;
    case "input":
      return (
        <Form.Item
          key={index}
          name={item.name ?? item.label}
          label={item.label}
          rules={item.rules}
          style={style}
        >
          <Input allowClear placeholder={item.placeholder}/>
        </Form.Item>
      );
    case "password":
      return (
        <Form.Item
          key={index}
          name={item.name ?? item.label}
          label={item.label}
          rules={item.rules}
          style={style}
        >
          <Input.Password allowClear placeholder={item.placeholder} />
        </Form.Item>
      );
    case "textarea":
      return (
        <Form.Item
          key={index}
          name={item.name ?? item.label}
          label={item.label}
          rules={item.rules}
          style={style}
        >
          <Input.TextArea allowClear placeholder={item.placeholder} />
        </Form.Item>
      );
    case "richtext":
      return (
        <Form.Item
          key={index}
          name={item.name ?? item.label}
          label={item.label}
          rules={item.rules}
          style={style}
        >
          <FormRichEditor />
        </Form.Item>
      );
    case "marktext":
      return (
        <Form.Item
          key={index}
          name={item.name ?? item.label}
          label={item.label}
          rules={item.rules}
          style={style}
        >
          <FormMarkEditor />
        </Form.Item>
      );
    case "upload":
      return (
        <Form.Item
          key={index}
          name={item.name ?? item.label}
          label={item.label}
          rules={item.rules}
        >
          <FormUpload
            accept={item.accept}
            listType={item.listType || "text"}
            maxCount={item.maxCount || 1}
            style={style}
          >
            <Button value="点击上传" />
          </FormUpload>
        </Form.Item>
      );
    case "custom":
      return (
        <Form.Item
          key={index}
          name={item.name ?? item.label}
          label={item.label}
          rules={item.rules}
          style={style}
        >
          {renderCustomNode(item.customNode)}
        </Form.Item>
      );
    case "modalPicker":
      return (
        <Form.Item
          key={index}
          name={item.name ?? item.label}
          label={item.label}
          style={style}
        >
          {/* <span
            onClick={() => {
              if (typeof item.onClick === "function") {
                item.onClick({ event, form });
              }
            }}
          >
            {typeof item.render === "function" ? item.render(form, null) : null}
          </span> */}
        </Form.Item>
      );
    case "select":
      return (
        <Form.Item
          key={index}
          name={item.name ?? item.label}
          label={item.label}
          rules={item.rules}
          style={style}
        >
          <Select
            options={item.options || []}
            placeholder={item.placeholder || "请选择"}
            mode={item.mode}
            allowClear
          />
        </Form.Item>
      );
    case "cascader":
      return (
        <Form.Item
          key={index}
          name={item.name ?? item.label}
          label={item.label}
          rules={item.rules}
          style={style}
        >
          <Cascader
            options={item.options || []}
            placeholder={item.placeholder || "请选择"}
            allowClear
          />
        </Form.Item>
      );
    case "date":
      return (
        <Form.Item
          key={index}
          name={item.name ?? item.label}
          label={item.label}
          rules={item.rules}
          style={style}
        >
          <DatePicker
            allowClear
            showTime={item.showTime}
            placeholder={item.placeholder || "请选择"}
          />
        </Form.Item>
      );
    case "dateRange":
      return (
        <Form.Item
          key={index}
          name={item.name ?? item.label}
          label={item.label}
          rules={item.rules}
          style={style}
        >
          <DatePicker.RangePicker
            allowClear
            showTime={item.showTime}
            placeholder={["请选择", "请选择"]}
          />
        </Form.Item>
      );
    case "time":
      return (
        <Form.Item
          key={index}
          name={item.name ?? item.label}
          label={item.label}
          rules={item.rules}
          style={style}
        >
          <TimePicker allowClear placeholder={item.placeholder || "请选择"} />
        </Form.Item>
      );
    case "timeRange":
      return (
        <Form.Item
          key={index}
          name={item.name ?? item.label}
          label={item.label}
          rules={item.rules}
          style={style}
        >
          <TimePicker.RangePicker
            allowClear
            placeholder={["请选择", "请选择"]}
          />
        </Form.Item>
      );
    case "number":
      return (
        <Form.Item
          key={index}
          name={item.name ?? item.label}
          label={item.label}
          rules={item.rules}
          style={style}
        >
          <InputNumber max={item.max} min={item.min} placeholder={item.placeholder} />
        </Form.Item>
      );
    case "switch":
      return (
        <Form.Item
          key={index}
          name={item.name ?? item.label}
          label={item.label}
          rules={item.rules}
          style={style}
        >
          <Switch />
        </Form.Item>
      );
    case "jsonEditor":
      return (
        <Form.Item
          key={index}
          name={item.name ?? item.label}
          label={item.label}
          rules={item.rules}
          style={style}
        >
          <FormJsonEditor />
        </Form.Item>
      );
    default:
      return null;
  }
};

export default FormItem;
